<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/animate.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <style>
        * {
            margin: 0px;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #333;
        }

        img {
            width: 100%;
            height: 100%;
            opacity: 0.5;
        }

        .login-panel {
            position: fixed;
            margin-left: -150px;
            margin-top:-100px;
            left: 50%;
            top: 50%;
            width: 300px;
            height: 200px;
            opacity: 0.8;
        }

        .login-tips {
            display: none;
        }
    </style>
</head>

<body>
    <img src="./img/01.jpg">
    <div class="panel panel-default login-panel">
        <div class="panel-heading">图书管理系统后台登录</div>
        <div class="panel-body">
            <div class="form-group">
                <input type="text" class="form-control">
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>
            </div>
            <div class="form-group">
                <input type="text" class="form-control">
            </div>
            <button type="button" class="btn btn-success" style="width: 100px; margin-left: 30px;">登录</button>
            <button type="button" class="btn btn-info" style="width: 100px;">注册</button>
        </div>
        <div class="alert alert-danger login-tips" role="alert" style="margin-top: 20px;">Oh, Shit, Ass,登陆失败</div>
    </div>
</body>
<script>
    $("input:first").focus(function () {
        $(this).parent().removeClass("has-error has-feedback");
    })
    $("input:first").blur(function () {
        var email_reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!email_reg.test($(this).var)) {
            $(this).parent().addClass(" has-error has-feedback");
        }
    });
    $("button:first").click(function () {
        $.ajax({
            url: "http://www.baidu.com",
            type: "post",
            data: {
                username: $("input:first").var,
                password: $("input:last").val
            },
            success: function () {
                window.location.href = "file:///E:/1000phoneCode/2.%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5/2020091001/demo01.html?#"
            },
            error: function () {
                $(".login-tips").fadeIn(1000).delay(1000).fadeOut(100);
                $(".login-panel").addClass(" animate__animated animate__bounce");
                setTimeout(function () {
                    $(".login-panel").removeClass(" animate__animated animate__bounce");

                }, 1000);
                // window.location.href = "file:///E:/1000phoneCode/2.%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5/2020091001/demo01.html?#"
            }
        })
    })
</script>

</html>